<template>
  <div class="WidgetFromDetail-box my-el-cell-group lh28 ">
    <!-- 流程数据 -->
    <h3 class="text-color text-shadow">流程数据</h3>
    <div class="title-2 text-color">
      {{ formbox.title }}
    </div>
    <div class="flex justify-between">
      <span
        >单位：<span class="text-color">{{
          getCompanyName(formbox.companyId)
        }}</span></span
      >
      <span
        >处理人：<span class="text-color">{{ formbox.dealUser }} </span></span
      >
    </div>
    <div class="flex justify-between">
      <span>
        创建时间：<span class="text-color"
          >{{ formbox.createTime }}
        </span></span
      >
      <span
        >预处理时间：<span class="text-color"
          >{{ formbox.chaoshiTimeStamp }}
        </span></span
      >
    </div>
    <!-- 问题描述 -->
    <el-cell-group inset>
      <h3 class="text-color text-shadow">问题描述</h3>
      <div class="my-selfFrom">
        <self-from
          :searchData="lastFormData"
          :formList="lastFormList"
          v-if="lastFormList.length"
        ></self-from>
      </div>

      <!-- <form-create
        v-if="lastFormList.length"
        v-model="formbox.editFormInstance"
        :value.sync="lastFormData"
        :rule="lastFormList"
        :option="formbox.editOptions"
      /> -->
      <div class="white-bg pd10" style="border-radius:20px;margin-top:12px">
        <flow-from
          :workAll="workList"
          :orderType="Number(formbox.state)"
        ></flow-from>
      </div>
    </el-cell-group>
  </div>
</template>
<script>
import selfFrom from "@/components/selfFrom";
import { mapState } from "vuex";
export default {
  name: "WidgetFromDetail",
  components: { selfFrom },
  data() {
    return {};
  },
  computed: {
    ...mapState(["user", "isAdmin", "companyList"])
  },
  props: {
    lastFormData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    lastFormList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    formbox: {
      type: Object,
      default: () => {
        return {};
      }
    },
    topFormData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    topFormList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    workList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
    getCompanyName(id) {
      return this.companyList.filter(i => i.value == Number(id))[0].label;
    }
  }
};
</script>
<style lang="scss">
.my-selfFrom {
  .van-cell {
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
  }
  .van-field__label {
    color: #fff;
  }
  .filed_box {
    border-bottom: 1px solid #b5d9ff;
  }
}
</style>
<style>
.van-image-preview__overlay {
  z-index: 2499 !important;
}
.van-image-preview {
  z-index: 2500 !important;
}
</style>
